<template>
  <div class="returnEqp">
    <el-dialog
      :title="$t('maintain')"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="80%"
    >
      <el-card class="box-card" shadow="never">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          :rules="rules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('toolingBarcode')" prop="toolingBarcode">
                <el-input
                  v-model="formInline.toolingBarcode"
                  :disabled="isDisbale"
                  clearable
                  @keydown.enter.native="onEnter"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('toolingType')" prop="toolingType">
                <el-input
                  v-model="formInline.toolingType"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('toolingModel')" prop="toolingModel">
                <el-input
                  v-model="formInline.toolingModel"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('flag')" prop="flag">
                <el-select v-model="formInline.flag" disabled>
                  <el-option
                    v-for="item in toolingFlagList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('repairId')" prop="repairId">
                <el-input
                  v-model="formInline.repairId"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('repairPart')" prop="repairPart">
                <el-select v-model="formInline.repairPart" >
                  <el-option
                    v-for="item in repairList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('repairReason')" prop="repairReason">
                <el-select v-model="formInline.repairReason" >
                  <el-option
                    v-for="item in maintenanceReasonList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('repairMode')" prop="repairMode">
                <el-select v-model="formInline.repairMode" >
                  <el-option
                    v-for="item in methodList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('cleanId')" prop="cleanId">
                <el-input
                  v-model="formInline.cleanId"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('cleanPart')" prop="cleanPart">
                <el-select v-model="formInline.cleanPart" >
                  <el-option
                    v-for="item in cleanPartsList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('clearReason')" prop="clearReason">
                <el-select v-model="formInline.cleanReason" >
                  <el-option
                    v-for="item in cleaningReasonList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('clearMode')" prop="clearMode">
                <el-select v-model="formInline.cleanMode" >
                  <el-option
                    v-for="item in clean_ModeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('hdStatus')" prop="hdStatus">
                <el-select
                  v-model="formInline.hdStatus"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in hdStatusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="`${$t('curUsedTimes')}`" prop="num">
                <el-input
                  v-model="formInline.usedTime"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('toolingImage')" prop="toolingImage">
                <el-upload
                  :headers="headers"
                  :action="updateAvatarApi"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  accept=".PNG,.JPG,.GIF"
                  class="avatar-uploader">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('maintainTime')" prop="time">
                <el-input
                  v-model="formInline.time"
                  disabled
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('resetFlag')" prop="isReset">
                <el-switch
                  v-model="formInline.isReset"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('remark')" prop="MaintainRemark">
                <el-input
                  :rows="2"
                  v-model="formInline.MaintainRemark"
                  type="textarea"
                  maxlength="200"
                  show-word-limit/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <span slot="footer">
        <el-button icon="el-icon-delete" @click="handleClose">
          {{ $t('cancel') }}
        </el-button>
        <el-button
          :disabled="BtnDisbale"
          type="primary"
          icon="el-icon-receiving"
          @click="doSave('ruleForm')">
          {{ $t('save') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import crudJob from '@/api/Tooling/toolingBasicInfo'
import selectJob from '@/api/system/attributes'
import { tips } from '@/utils/notification'
import toolingApi from '@/api/Tooling/toolingBasicInfo'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { getFullTime } from '@/utils/pickTime'
export default {
  name: 'ReturnEqp',
  mixins: [mySetting, networkTips],
  data() {
    return {
      headers: {
        Token: getToken()
      },
      isDisbale: false,
      BtnDisbale: false,
      // toolingBarcode: '',
      dialogVisible: false,
      formInline: {
        toolingType: '',
        toolingModel: '',
        flag: '',
        repairId: '',
        repairPart: '',
        repairReason: '',
        repairMode: '',
        cleanPart: '',
        cleanReason: '',
        hdStatus: '',
        usedTime: '',
        time: '',
        isReset: '',
        MaintainRemark: ''
      },
      rules: {
        toolingBarcode: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('toolingBarcode')}`, trigger: 'blur' }
        ],
        repairId: [
          { required: true, message: `${this.$t('pleaseInput')}${this.$t('repairId')}`, trigger: 'blur' }
        ],
        hdStatus: [
          { required: true, message: `${this.$t('pleaseSelect')}${this.$t('hdStatus')}`, trigger: 'change' }
        ]
      },
      toolingFlagList: [], // 标志位
      repairList: [], // 维修更换
      methodList: [], // 维修方式
      clean_ModeList: [], // 清洁方式
      cleanPartsList: [], // 清洁部件
      cleaningReasonList: [], // 清洁原因
      maintenanceReasonList: [], // 维修原因
      hdStatusList: [], // 状态列表
      imageUrl: ''
    }
  },
  computed: {
    ...mapGetters(['updateAvatarApi', 'baseApi'])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onEnter() {
      toolingApi.getToolingInfo({ toolingBarcde: this.formInline.toolingBarcode, actionType: 3 }).then(res => {
        if (res.code === 1) {
          const { year, mouth, day } = getFullTime()
          this.formInline = res.data instanceof Object ? Object.assign({}, res.data, { time: `${year}-${mouth}-${day}` }) : {}
          tips({ message: this.$t(res.message), code: res.code })
          this.isDisbale = true
        } else {
          tips({ message: this.$t(res.message), code: res.code })
        }
      })
    },
    // 点击保存
    doSave(val) {
      this.$refs[val].validate((valid) => {
        if (valid) {
          this.maintainTooling()
        } else {
          return false
        }
      })
    },
    maintainTooling() {
      this.BtnDisbale = true
      // this.formInline.toolingBarcode = this.toolingBarcode
      toolingApi.maintainTooling(this.$clearNull(this.formInline)).then(res => {
        if (res.code === 1) {
          this.netTips(res, this.handleClose, this.handleUpdate)
        } else {
          this.netTips(res)
          this.isDisbale = false
          this.BtnDisbale = false
          this.dialogVisible = true
        }
      }).catch(rej => {
        this.BtnDisbale = false
      })
    },
    handleAvatarSuccess(file) {
      this.imageUrl = this.baseApi + '/' + file.data
      this.formInline.toolingImage = this.baseApi + '/' + file.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 调用父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 打开弹窗
    openDialog() {
      this.repairEqp()
      this.MaintenanceMethod()
      this.getCleanParts()
      this.getClean_ModeList()
      this.getMaintenanceReasonList()
      this.getCleaningReasonList()
      this.getToolingFlagList()
      this.getHDStatusList()
      const { year, mouth, day } = getFullTime()
      this.dialogVisible = true
      this.formInline.time = `${year}-${mouth}-${day}`
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 标志位下拉框信息
    getToolingFlagList() {
      toolingApi.GetToolingFlagList().then(res => {
        this.toolingFlagList = res.data
      })
    },
    // 维修更换
    repairEqp() {
      selectJob.selectitemlist({ name: 'REPAIR_PART' }).then(res => {
        this.repairList = res.data
      })
    },
    // 维修方式
    MaintenanceMethod() {
      selectJob.selectitemlist({ name: 'Maintenance_Mode' }).then(res => {
        this.methodList = res.data
      })
    },
    // 清洁方式
    getClean_ModeList() {
      selectJob.selectitemlist({ name: 'Clean_Mode' }).then(res => {
        this.clean_ModeList = res.data
      })
    },
    // 清洁部件
    getCleanParts() {
      selectJob.selectitemlist({ name: 'CLEAN_PART' }).then(res => {
        this.cleanPartsList = res.data
      })
    },
    // 维修原因
    getMaintenanceReasonList() {
      selectJob.selectitemlist({ name: 'Maintenance_Reasons' }).then(res => {
        this.maintenanceReasonList = res.data
      })
    },
    // 清洁原因
    getCleaningReasonList() {
      selectJob.selectitemlist({ name: 'Clean_Reasons' }).then(res => {
        this.cleaningReasonList = res.data
      })
    },
    getHDStatusList() {
      crudJob.getHDStatus().then(res => {
        this.hdStatusList = res.data
      })
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row{
  margin: 10px 0 20px 0;
  padding: 0;
}
.box-card{
  padding: 10px 0;
  .form-inline{
    margin-bottom: 20px;
  }
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader ::v-deep .el-upload{
    margin-left: 40px;
  }
  .avatar-uploader-icon {
    font-size: 15px;
    color: #8c939d;
    width: 10px;
    height: 10px;
    line-height: 10px;
    text-align: center;
  }
  .avatar {
    width: 160px;
    height: 70px;
    display: block;
  }
</style>
